<template>
  <div class="m-b-10">
    <el-tag v-for="(item, index) in breadTag" :key="item.name" size="small" class="m-r-5" closable
      :effect="currRoute === item.name ? 'dark' : 'plain'" @click="seleteMenu(item)" @close="closeMenu(item)">
      {{ item.meta.title }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "BreadCrumb",
  data() {
    return {};
  },
  methods: {
    seleteMenu(target) {
      this.$router.push({
        name: target.name,
      });
    },
    closeMenu(item) {
      this.$store.commit("menuSwitch/CloseItem", { tagName: item.name, cur: this.currRoute });
    },
  },
  computed: {
    breadTag() {
      return this.$store.state.menuSwitch.tabsList;
    },
    currRoute() {
      return this.$route.name
    }
  },
};
</script>

<style scoped lang="less">
.el-tag {
  cursor: pointer;
}
</style>